<template>
  <div class="subset">
    <!-- 搜索 -->
    <el-form
      :inline="true"
      :model="pageInfo"
      class="demo-form-inline"
      ref="queryForm"
      label-width="110px"
      size="small"
    >
      <el-row :gutter="10">
        <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="5">
          <el-form-item label="合同编号">
            <el-input
              v-model="pageInfo.deviceName"
              placeholder="请输入合同编号"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="8" :lg="9" :xl="5">
          <el-form-item label="合同类型">
            <el-input
              v-model="pageInfo.manufacturerName"
              placeholder="请输入合同类型"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="8" :lg="9" :xl="5">
          <el-form-item label="负责人">
            <el-input
              v-model="pageInfo.imei"
              placeholder="请输入负责人"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="5">
          <el-form-item label="部门">
            <el-input
              v-model="pageInfo.imei"
              placeholder="请输入部门"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 按钮 -->
    <el-button size="small" type="success" icon="el-icon-plus" @click="add"
      >添加</el-button
    >
    <el-button size="small" @click="batchRemove()">批量删除</el-button>
    <el-button size="small" type="warning" icon="el-icon-ship" @click="print"
      >打印</el-button
    >
    <el-button
      type="warning"
      plain
      icon="el-icon-download"
      size="mini"
      style="float: right; margin-right: 15px"
      @click="exportExcel"
      >导出设备</el-button
    >
    <!-- @click="$router.push({ path: '/import', query: { type: 'employees' } })" -->
    <el-button
      type="success"
      plain
      icon="el-icon-upload2"
      size="mini"
      style="float: right"
      >导入设备</el-button
    >
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        size="mini"
        stripe
        height="100%"
        style="width: 100%; margin-top: 30px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            {{ (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1 }}
            --
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="stature" align="center" label="身高" width="180">
        </el-table-column>
        <el-table-column prop="weight" align="center" label="体重" width="180">
        </el-table-column>
        <el-table-column prop="sex" align="center" label="性别" width="180">
          <template v-slot="{ row }">
            {{ row.sex | personnelsex }}
          </template>
        </el-table-column>
        <el-table-column
          prop="birthdate"
          align="center"
          label="出生年月"
          width="180"
        >
          <template v-slot="{ row }">
            {{ row.birthdate | formData }}
          </template>
        </el-table-column>
        <el-table-column
          prop="papersType"
          align="center"
          label="证件类型"
          width="220"
        >
          <template v-slot="{ row }">
            <span>{{ row.papersType | personsNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="basedin"
          align="center"
          label="工作城市"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="coneducation"
          align="center"
          label="学历"
          width="180"
        >
          <template v-slot="{ row }">
            {{ row.coneducation | personducation }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="联系方式"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态" width="150">
          <template v-slot="{ row }">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="row.status"
              :disabled="true"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="data"
          align="center"
          label="具体备注"
          width="280"
        >
        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit(row)"
              title="修改"
            />
            <el-button
              type="warning"
              icon="el-icon-finished"
              size="mini"
              @click="audit(row.id)"
              title="审核"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeDataById(row.id)"
              title="删除"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页查询 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNo"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    <!-- 添加，修改窗口 -->
    <!-- top="2vh" -->
    <el-dialog
      :title="form.id ? '修改数据' : '添加数据'"
      @close="close"
      :visible.sync="showDialog"
      width="30%"
      top="2vh"
    >
      <el-form
        :rules="rules"
        ref="form"
        :model="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            placeholder="请输入姓名"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="item in crsex"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex; justify-content: space-between">
          <el-form-item label="身高信息" prop="stature">
            <el-input
              placeholder="请输入身高"
              v-model="form.stature"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="weight"
            label="体重信息"
            style="padding-left: 10px"
          >
            <el-input
              placeholder="请输入体重"
              v-model="form.weight"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; justify-content: space-between">
          <el-form-item label="出身年月" prop="birthdate">
            <!-- <el-input
            placeholder="请输入出生年月"
            v-model="form.birthdate"
            autocomplete="off"
          ></el-input> -->
            <el-date-picker
              v-model="form.birthdate"
              style="width: 98%"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              type="date"
              placeholder="请输入出生年月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="证件类型"
            prop="crpapersType"
            style="padding-left: 10px"
          >
            <!-- <el-input
            placeholder="请选择证件类型"
            v-model="form.papersType"
            autocomplete="off"
          ></el-input> -->
            <el-select v-model="form.papersType" placeholder="请选择证件类型">
              <el-option
                v-for="item in crpapersType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="工作城市" prop="basedin">
          <el-input
            placeholder="请选择工作城市"
            v-model="form.basedin"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="coneducation">
          <!-- <el-input
            placeholder="请选择学历"
            v-model="form.coneducation"
            autocomplete="off"
          ></el-input> -->
          <el-select
            v-model="form.coneducation"
            placeholder="请选择学历"
            style="width: 100%"
          >
            <el-option
              v-for="item in crconeducation"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            placeholder="请输入联系方式"
            v-model="form.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="具体备注" prop="deviceName">
          <el-input
            placeholder="请选择具体备注"
            v-model="form.deviceName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入枚举数据
import cruds from '@/utils/enumerate/cruds'
// 导入自定义验证规则
import { validatePhone } from '@/filters/filters'
export default {
  name: 'cruds',
  data() {
    return {
      // 表格数据
      tableData: [
        // {
        //   id: 1,
        //   name: '风过无痕',
        //   sex: 0,
        //   stature: 178,
        //   weight: 140,
        //   birthdate: 1018195200000,
        //   basedin: '福州',
        //   coneducation: 0,
        //   status: 1,
        //   phone: '15220730439',
        //   papersType: 0
        // }
      ],
      // 表格复选数组
      selectValue: [],
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 15
      },
      // 添加修改开关
      showDialog: false,
      // 表单数据
      form: {},
      // 表单验证
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        stature: [
          { required: true, message: '请输入身高', trigger: 'blur' }
          // { validator: validateId, trigger: "change" },
        ],
        weight: [
          { required: true, message: '请输入体重', trigger: 'blur' }
          // { validator: validatePhone, trigger: "change" },
        ],
        birthdate: [
          { required: true, message: '请输入出生年月', trigger: 'blur' }
        ],
        papersType: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ],
        basedin: [
          { required: true, message: '请选择工作城市', trigger: 'blur' }
        ],
        coneducation: [
          { required: true, message: '请选择学历', trigger: 'blur' }
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        deviceName: [
          { required: true, message: '请选择具体备注', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'change' }
        ]
      },
      // 添加数据
      // 性别
      crsex: cruds.consex,
      // 证件类型
      crpapersType: cruds.conpapersNumber,
      // 学历
      crconeducation: cruds.coneducation
    }
  },
  created() {
    // 查询表格数据
    this.tableDatalist()
  },
  methods: {
    // 表格数据
    tableDatalist() {
      if (JSON.parse(localStorage.getItem('表格数据')) == null) return
      this.tableData = JSON.parse(localStorage.getItem('表格数据'))
      this.pageInfo.total = this.tableData.length
      console.log('表格数据', this.tableData.length)
    },
    //复选框发生变化执行方法
    handleSelectionChange(selection) {
      this.selectValue = selection
      //console.log(this.selectValue)
    },
    // 搜索
    async handleQuery() {
      this.pageInfo.pageNo = 1
      await this.loadData()
      await this.$message.success('搜索成功')
    },
    // 重置
    resetQuery() {
      this.pageInfo.pageNo = 1
      //   this.loadData();
      this.$message.success('数据重置成功')
    },
    // 分页 左右 点击 输入
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val
      // this.loadData();
    },
    // 分页多少条点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val
      // this.loadData();
    },
    // 导出
    exportExcel() {},
    // 打印
    print() {},
    // 添加
    add() {
      // 打开表单
      this.showDialog = true
    },
    // 审核
    audit(id) {
      console.log('审核数据id', id)
    },
    // 删除
    removeDataById(id) {
      console.log('删除单挑数据id', id)
      this.$confirm('确定删除这条数据', '删除')
        .then(async () => {
          //   const res = await eqdelete(id);
          //   this.$message.success(res.message);
          //   if (this.tableData.length == 1 && this.pageInfo.pageNo != 1) {
          //     this.pageInfo.pageNo--;
          //   }
          //   this.loadData();
          const index = this.tableData.findIndex((v) => v.id == id)
          console.log('当前数据下标', index)
          this.tableData.splice(index, 1)
          localStorage.removeItem('表格数据')
          localStorage.setItem('表格数据', JSON.stringify(this.tableData))
        })
        .catch(() => {})
    },
    // 批量删除
    batchRemove() {
      // 判断是否选中
      if (this.selectValue.length == 0) {
        this.$message.warning('请选择要删除的记录！')
        return
      }
      // 删除操作
      this.$confirm('确定删除这条数据', '删除')
        .then(() => {
          //数组
          var idList = []
          // 获取需要删除的数组id
          for (var i = 0; i <= this.selectValue.length; i++) {
            var obj = this.selectValue[i]
            //id值
            var id = obj.id
            //放到数组里面
            idList.push(id)
          }
          // 发请求删除数据
          // 提示信息
          this.$message.success('删除成功')
          // 刷新数据
        })
        .catch(() => {})
    },
    // 查看单挑数据
    edit(row) {
      console.log('单挑数据id', row)
      this.showDialog = true
      this.form = row
      // const that = this
      // this.tableData.forEach((item) => {
      //   if ((item.id = id)) {
      //     // console.log('找到数据了', item)
      //     this.form = item
      //     // console.log('123', this.form)
      //   }
      // })
    },
    // 取消
    close() {
      this.form = {}
      this.showDialog = false
    },
    // 确定
    save() {
      this.$refs.form.validate((v) => {
        if (v) {
          console.log('添加表单数据', this.form)
          // 修改数据
          if (this.form.id) {
            // 获取当前数据下标
            console.log(v)
            const index = this.tableData.findIndex((v) => (v.id = this.form.id))
            console.log('当前数据下标', index)
            // this.tableData.findIndex((v) => {
            //   console.log('1232', (v.id = this.form.id))
            //   let x = ''
            //   x = v.id = this.form.id
            //   console.log(x)
            //
            // })
            this.tableData.splice(index, 1)

            console.log('修改执行')
            // let y = {}
            // this.$set(y, index, this.form)
            this.tableData.push(this.form)
            // this.tableData.push(y)
            localStorage.removeItem('表格数据')
            this.$message.success('修改数据成功')
            this.close()
          } else {
            // 添加数据
            // 查看id
            console.log('查看执行')
            console.log('数据id', this.tableData.length)
            let id = this.tableData.length + 1
            this.form.id = id
            let y = this.form
            console.log('添加数据', y)
            this.tableData.push(y)
            this.pageInfo.total++
            // this.pageInfo.pageNo = Math.ceil(
            //   this.pageInfo.total / this.pageInfo.pageSize
            // );
            this.$message.success('添加数据成功')
          }
          localStorage.setItem('表格数据', JSON.stringify(this.tableData))
          this.pageInfo.pageNo = 1
          //   this.$message.success(res.message)
          this.close()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.subset {
  width: 100%;
  // height: 838px;
  //   background-color: skyblue;
  .demo-form-inline {
    margin-top: 5px;
    margin-left: -40px;
    .el-form-item {
      // word-break: keep-all;
    }
    @media screen and (min-height: 1070px) {
      margin: 15px 0 15px -40px;
    }
  }
  .table {
    width: 100%;
    height: 550px;
    @media screen and (min-height: 1070px) {
      height: 685px;
    }
  }
  .pagination {
    // background-color: skyblue;
    position: fixed;
    bottom: 50px;
    right: 120px;
    // 适配浏览器全屏模式下的上下边距
    @media screen and (min-height: 1070px) {
      bottom: 65px;
    }
  }
}
</style>
